import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/api/api.dart';
import 'package:xiaomi_shop/app/modules/shop/controllers/shop_detail_controller.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/models/index.dart';

class ShopDetailInfoView extends GetView {
  @override
  final ShopDetailController controller = Get.find();

  Function skuSheet;

  ShopDetailInfoView(this.skuSheet, {super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => controller.shopModel.value.id == null
        ? SizedBox(
            height: ScreenAdapter.height(2400),
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          )
        : Container(
            key: controller.globalKey1,
            width: ScreenAdapter.width(1080),
            child: Column(
              children: [
                // 图片
                Container(
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30),
                      ScreenUtil().statusBarHeight,
                      ScreenAdapter.width(30),
                      ScreenAdapter.width(30)),
                  height: ScreenAdapter.height(900),
                  child: Image.network(
                    "${Api.basicUrl}/${controller.shopModel.value.pic}",
                    fit: BoxFit.contain,
                  ),
                ),
                // 标题
                Container(
                  margin: EdgeInsets.only(top: ScreenAdapter.width(30)),
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
                  alignment: Alignment.topLeft,
                  child: Text(
                    controller.shopModel.value.title!,
                    style: TextStyle(
                        color: Colors.black87,
                        fontSize: ScreenAdapter.fontSize(46)),
                  ),
                ),
                // 副标题
                Container(
                  margin: EdgeInsets.only(top: ScreenAdapter.width(20)),
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
                  alignment: Alignment.topLeft,
                  child: Text(
                    controller.shopModel.value.sub_title!,
                    style: TextStyle(
                        color: Colors.black54,
                        fontSize: ScreenAdapter.fontSize(36)),
                  ),
                ),
                // 价格
                Container(
                  margin: EdgeInsets.only(top: ScreenAdapter.width(30)),
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
                  child: Row(
                    children: [
                      Text(
                        "¥${controller.shopModel.value.price}",
                        style: TextStyle(
                            color: Colors.deepOrange,
                            fontWeight: FontWeight.w600,
                            fontSize: ScreenAdapter.fontSize(80),
                            textBaseline: TextBaseline.ideographic),
                      ),
                      SizedBox(
                        width: ScreenAdapter.width(20),
                      ),
                      Text(
                        "¥${controller.shopModel.value.old_price}",
                        style: TextStyle(
                            color: Colors.grey,
                            fontSize: ScreenAdapter.fontSize(40),
                            decoration: TextDecoration.lineThrough,
                            textBaseline: TextBaseline.ideographic),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: ScreenAdapter.height(20),
                  color: Colors.grey.shade100,
                ),
                // 分期
                Container(
                  height: ScreenAdapter.height(140),
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
                  child: Row(
                    children: [
                      SizedBox(
                        width: ScreenAdapter.width(120),
                        child: const Text(
                          "分期",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                          child: Row(
                        children: [
                          Container(
                            margin:
                                EdgeInsets.only(right: ScreenAdapter.width(10)),
                            padding: EdgeInsets.fromLTRB(ScreenAdapter.width(8),
                                0, ScreenAdapter.width(8), 0),
                            decoration: BoxDecoration(
                                color: Colors.deepOrange.shade100,
                                borderRadius: BorderRadius.circular(
                                    ScreenAdapter.width(8))),
                            child: const Text(
                              "免息",
                              style: TextStyle(color: Colors.deepOrange),
                            ),
                          ),
                          const Text("低至49983元x6期")
                        ],
                      )),
                      const Icon(Icons.navigate_next),
                    ],
                  ),
                ),
                Container(
                  height: ScreenAdapter.height(20),
                  color: Colors.grey.shade100,
                ),
                // 筛选
                InkWell(
                    onTap: () {
                      this.skuSheet();
                    },
                    child: Container(
                      height: ScreenAdapter.height(200),
                      padding: EdgeInsets.fromLTRB(ScreenAdapter.width(30), 0,
                          ScreenAdapter.width(30), 0),
                      child: Row(
                        children: [
                          SizedBox(
                            width: ScreenAdapter.width(120),
                            child: const Text(
                              "已选",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          ),
                          const Expanded(
                              child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text("RedmiK50 Pro 8GB+128GB 幽芒×"),
                              Text(
                                "可选增值服务",
                                style: TextStyle(color: Colors.deepOrange),
                              )
                            ],
                          )),
                          const Icon(Icons.navigate_next),
                        ],
                      ),
                    )),
                Divider(
                  color: Colors.grey.shade100,
                  indent: ScreenAdapter.width(150),
                ),
                // 收货地址
                Container(
                  height: ScreenAdapter.height(200),
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
                  child: Row(
                    children: [
                      SizedBox(
                        width: ScreenAdapter.width(120),
                        child: const Text(
                          "送至",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      const Expanded(
                          child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text.rich(TextSpan(text: "延安市 宝塔区 ", children: [
                            TextSpan(
                                text: "有现货",
                                style: TextStyle(color: Colors.deepOrange))
                          ])),
                          Text(
                            "今天23点前付款，预计10月21日送达",
                            style: TextStyle(color: Colors.black54),
                          )
                        ],
                      )),
                      const Icon(Icons.navigate_next),
                    ],
                  ),
                ),
                Divider(
                  color: Colors.grey.shade100,
                  indent: ScreenAdapter.width(150),
                ),
                // 门店
                Container(
                  height: ScreenAdapter.height(260),
                  padding: EdgeInsets.fromLTRB(
                      ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
                  child: Row(
                    children: [
                      SizedBox(
                        width: ScreenAdapter.width(120),
                        child: const Text(
                          "门店",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      const Expanded(
                          child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "小米之家延安万达城红街专卖店",
                              ),
                              Text(
                                "暂时缺货",
                                style: TextStyle(
                                    color: Color.fromARGB(255, 227, 142, 5)),
                              ),
                            ],
                          ),
                          Text(
                            "距离104km",
                            style: TextStyle(
                                color: Color.fromARGB(255, 227, 142, 5)),
                          ),
                          Text(
                            "09:00-21:00",
                            style: TextStyle(color: Colors.black54),
                          )
                        ],
                      )),
                      const Icon(Icons.navigate_next),
                    ],
                  ),
                ),
                Container(
                  height: ScreenAdapter.height(20),
                  color: Colors.grey.shade100,
                ),
              ],
            ),
          ));
  }
}
